

Vue.component("component-manage",{
    
    data: function () {
        return {
            dom_manageWindow:null,
            dom_manageShade:null,

            list_projects:[],
        }
    },
    props:[
        "component_manage_isshow"
    ],
    template:`
         <div id="component-manage" >
            <!-- 背景遮罩有事件 -->
            <div class="manage-shade"   v-on:click="on_close"
            style="display:none">
                
            </div>
            <!-- 窗口 -->
            <div class="manage-window" style="left: -400px;transform: rotateY(112deg) rotateX(0deg);">
                <div class="mw-controller">
                    <button class="close" v-on:click="on_close"></button>
                    <!-- <button class="add"></button> -->
                </div>
                <div class="mw-title">
                    <h3>项目信息管理</h3>
                    <button v-on:click="on_createProject()">
                        <img src="./img/icon/add.png" />
                    </button>
                </div>
                <ul class="mw-content">


                    <li v-for = "(item , index) in list_projects"
                        v-on:click="on_thisClick(index)"
                    >
                        <img src="./img/icon/files.png" />
                        <span>文本域{item.name}!</span>
                        <button v-on:click= "on_thisRemove(index,item.code)">
                            X
                        </button>
                    </li>
                </ul>

            </div>
    </div>
    `,
    methods:{
        on_close:function(){
            components.data_set_component_manage_isShow(
                !components.data_get_component_manage_isShow()
            );
        },

        fun_closeDom:function()
        {
            // console.log("物体隐藏");
            // console.log(this.dom_manageShade);
            //执行动画内容
            anime({
                targets:this.dom_manageWindow,
                duration:1200,

                left:-400,
                rotateY:112,
                rotateX:0,

            });
            
            anime({
                targets:this.dom_manageShade,
                duration:400,
                opacity:0,
                complete: anim=> {
                    this.dom_manageShade.style.display = "none";
                },
            });


        },

        fun_blockDom:function()
        {
            console.log("物体显示");
            //请求数据
            this.fun_requestData();

            //执行动画内容
            anime({
                targets:this.dom_manageWindow,
                duration:1200,
                left:"60px",
                rotateY:0,
                rotateX:0,
            });

            anime({
                targets:this.dom_manageShade,
                duration:800,
                opacity:1,
                begin: anim => {
                    this.dom_manageShade.style.display = "block";
                }
            });
        },

        on_thisRemove:function(index,code)
        {
            console.log(index,code);    //打印内容
            event.stopPropagation();  //阻止父级的事件


            //清除当前内容
            this.list_projects.splice(index,1);
            
            //请求网络内容
            axios({
                url:DELETE_PROJECT_URL,
                params:{
                    code:code,
                },
                method:DELETE_PROJECT_METHOD,
            }).then(res=>{
                console.log(res);
            }).catch(err=>{
                console.log(err);
            });
        },
        /**
         * 
         * @param {列表点击事件} index 
         */
        on_thisClick:function(i)
        {
            console.log("click",i,this.list_projects[i].code);

            //执行住要数据请求当前内容
            main.fun_data_requestData(this.list_projects[i].code);




            //关闭当前窗口
            components.data_set_component_manage_isShow(
                false
            );
            
        },
        fun_requestData:function(){
            console.log("------------------请求数据");
            axios({
                url:REQUEST_PROJECT_URL,
                params:{
                    // "uuid":uuid
                },
                method:REQUEST_PROJECT_METHOD
            }).then(res=>{
                console.log(JSON.parse(JSON.stringify(res)));
                console.log(res);
                this.list_projects = res.data.data;
                
                
            }).catch(err=>{

            })
        },
        /**
         * 创建项目
         */
        on_createProject:function(){
            console.log("------------------创建项目");
            axios({
                url:CREATE_PROJECT_URL,
                params:{
                    code:uuid(),
                    name:"新的项目",
                },
                method:CREATE_PROJECT_METHOD
            }).then(res=>{
                console.log("创建项目成功");
            }).catch(err=>{
                console.log("创建项目失败");
            })
        }


    },
    watch: {
        component_manage_isshow(newValue,oldValue) {
            // console.log(newValue,oldValue)
            // this.computed_component_manage_isshow = newValue
            // console.log(this.computed_component_manage_isshow)
            // console.log(newValue);
            if(newValue){
                this.fun_blockDom();
            }else{
                this.fun_closeDom();
            }
        }
    },
    computed:{
        // computed_component_manage_isshow:function(){
        //     console.log(this.component_manage_isshow);
        //     return this.component_manage_isshow;
        // }
    },
    created()
    {
        // this.dom_manageWindow = this.$el.getElementsByClassName("manage-window");
        
        //插入数据



    },
    mounted()
    {   
        // console.log("-------------------");
        this.dom_manageWindow = this.$el.getElementsByClassName("manage-window")[0];
        this.dom_manageShade = this.$el.getElementsByClassName("manage-shade")[0];
    }
});